<template>
  <view class="container">
    <view class="header">
      <text class="title">测试页面</text>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text>加载中...</text>
    </view>
    
    <!-- 错误状态 -->
    <view class="error-state" v-if="error">
      <text>{{ error }}</text>
      <button @tap="loadData">重试</button>
    </view>
    
    <!-- 设备列表 -->
    <view class="device-list" v-if="!loading && !error">
      <view class="device-item" v-for="device in deviceList" :key="device._id">
        <view class="device-info">
          <text class="device-name">{{ device.de_name || '未命名设备' }}</text>
          <text class="device-status" :class="getStatusClass(device.de_status)">
            {{ getStatusText(device.de_status) }}
          </text>
        </view>
        <view class="device-time">
          {{ formatTime(device.update_time) }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      error: '',
      deviceList: []
    }
  },
  
  onLoad() {
    this.loadData()
  },
  
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true
      this.error = ''
      
      try {
        const { result } = await uniCloud.callFunction({
          name: 'getDevices'
        })
        
        console.log('云函数返回结果：', result)
        
        if (result.code === 0) {
          this.deviceList = result.data
        } else {
          this.error = result.message || '获取数据失败'
        }
      } catch (e) {
        console.error('加载数据失败：', e)
        this.error = '加载数据失败：' + (e.message || e)
      } finally {
        this.loading = false
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '离线',
        1: '在线',
        2: '警告'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取状态样式
    getStatusClass(status) {
      const classMap = {
        0: 'status-offline',
        1: 'status-online',
        2: 'status-warning'
      }
      return classMap[status] || 'status-unknown'
    },
    
    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return '未知'
      const date = new Date(timestamp)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.loading-state {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error-state {
  text-align: center;
  padding: 20px;
}

.error-state text {
  color: #ff4d4f;
  margin-bottom: 10px;
  display: block;
}

.device-list {
  background-color: #fff;
  border-radius: 8px;
}

.device-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.device-item:last-child {
  border-bottom: none;
}

.device-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.device-name {
  font-size: 16px;
  color: #333;
}

.device-status {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.status-online {
  background-color: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.status-offline {
  background-color: rgba(0, 0, 0, 0.1);
  color: #999;
}

.status-warning {
  background-color: rgba(250, 173, 20, 0.1);
  color: #faad14;
}

.status-unknown {
  background-color: rgba(0, 0, 0, 0.1);
  color: #999;
}

.device-time {
  font-size: 12px;
  color: #999;
}
</style> 